import { useState,  } from "react";
import { useParams ,Link} from "react-router-dom";
import axios from "axios";
import './category.css'
import Banner from '../pages/page/banner'
export default function Category() {
    let [data, setData] = useState([])
    let params = useParams()
    useEffect(() => {
        console.log(params.id);
        axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${params.id}`).then(res => {
            console.log(res.data.result.children);
            if (res.data.msg == '操作成功') {
                data = res.data.result.children
                setData([...data])
            }
        })
    }, [params.id])//用于检测只有params.id发生变化才会更新触发useEffect

    return <div>
        <div className="cont">
            <Banner></Banner>
        </div>
        <div className="sub-list" data-v-6b07c3bf="">
            <h3 data-v-6b07c3bf="">全部分类</h3>
            <ul data-v-6b07c3bf="">
                {data.map((i, ind) => {
                    return <li data-v-6b07c3bf="" key={ind}>
                        <img src={i.picture} data-v-6b07c3bf="" />
                        <p data-v-6b07c3bf="">{i.name}</p>
                    </li>
                })}

            </ul>
        </div>
        {
            data.map((i, ind) => {
                return <div className="ref-goods" key={ind} >
                    <div className="head">
                        <h3 className="h3">- {i.name} -</h3>
                        <p className="p">温暖柔软，品质之选</p>
                        <a href="#!">查看全部</a>
                    </div>
                    <div className="body">
                        {i.goods.map((item, index) => {
                            return <Link to={'/product/'+item.id}  key={index}>
                                <img src={item.picture} alt="" />
                                <p>{item.name}</p>
                                <p>{item.desc}</p>
                                <p>￥{item.price}</p>
                            </Link>
                        })}

                    </div>
                </div>
            })
        }


    </div>
}